<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">

	<head>
		<meta charset="utf-8">
		<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
		<link rel="icon" type="image/png" href="../assets/img/favicon.png">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">

		<title>我爱面试后台</title>

		<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport'>
		<meta name="viewport" content="width=device-width">

		<!-- Bootstrap core CSS     -->
		<link href="../assets/css/bootstrap.min.css" rel="stylesheet">

		<!--  Paper Dashboard CSS    -->
		<link href="../assets/css/amaze.css" rel="stylesheet">

		<!--  CSS for Demo Purpose, don't include it in your project     -->
		<link href="../assets/css/demo.css" rel="stylesheet">

		<!--     Fonts and icons     -->
		<link href="../assets/css/font-awesome.min.css" rel="stylesheet">
		<link href="../assets/css/font-muli.css" rel='stylesheet' type='text/css'>
		<link href="../assets/css/themify-icons.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css"
			href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">

		<link href="../assets/vendors/sweetalert/css/sweetalert2.min.css" rel="Stylesheet">

		<!--    JQuery UI     -->
		<link href="../assets/vendors/jquery-ui-1.12.0/jquery-ui.css" rel="stylesheet">
		<!-- Bootstrap core CSS     -->
		<link href="../assets/css/bootstrap.min.css" rel="stylesheet">

		<!--  Paper Dashboard CSS    -->
		<link href="../assets/css/amaze.css" rel="stylesheet">

		<!--  CSS for Demo Purpose, don't include it in your project     -->
		<link href="../assets/css/demo.css" rel="stylesheet">


		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">


	</head>

	<body>
		<div class="wrapper">
			<div class="sidebar" data-background-color="brown" data-active-color="danger">

				<div class="logo">
					<a href="#" class="simple-text">
						我爱面试后台
					</a>
				</div>
				<div class="logo logo-mini">
					<a href="#" class="simple-text">
						A
					</a>
				</div>
				<div class="sidebar-wrapper">
					<ul class="nav">
						<li class="active">
							<a href="../index.html">
								<i class="ti-panel"></i>
								<p>仪表盘</p>
							</a>
						</li>
						<li>
							<a data-toggle="collapse" href="#forms" class="collapsed" aria-expanded="false">
								<i class="ti-clipboard"></i>
								<p>
									文章管理
									<b class="caret"></b>
								</p>
							</a>
							<div class="collapse" id="forms" role="navigation" aria-expanded="false"
								style="height: 0px;">
								<ul class="nav">
									<li><a href="../management/publish_article.html">发布文章</a></li>
									<li><a href="../management/select_article.html">文章列表</a></li>
								</ul>
							</div>
						</li>

						<li>
							<a data-toggle="collapse" href="#forms1" class="collapsed" aria-expanded="false">
								<i class="ti-view-list-alt"></i>
								<p>
									博客管理
									<b class="caret"></b>
								</p>
							</a>
							<div class="collapse" id="forms1" role="navigation" aria-expanded="false"
								style="height: 0px;">
								<ul class="nav">
									<li><a href="../management/classify_article.html">文章分类管理</a></li>
									<li><a href="../management/label_article.html">文章标签管理</a></li>
								</ul>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="main-panel">
				<nav class="navbar navbar-default">
					<div class="container-fluid">
						<div class="navbar-minimize">
							<button id="minimizeSidebar" class="btn btn-round btn-white btn-fill btn-just-icon">
								<i class="ti-arrow-left"></i>
							</button>
						</div>
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse">
								<span class="sr-only">Toggle navigation</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
							<a class="navbar-brand" href="#"> 指示板 </a>
						</div>
						<div class="collapse navbar-collapse">
							<ul class="nav navbar-nav navbar-right">
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<i class="ti-user"></i>
										<p class="hidden-lg hidden-md">
											Notifications
											<b class="caret"></b>
										</p>
									</a>
									<ul class="dropdown-menu">
										<li>
											<a href="#">账户登录</a>
										</li>
										<li>
											<a href="#">注册账户</a>
										</li>
										<li>
											<a href="#" id="logout">退出登录</a>
										</li>
									</ul>
								</li>


								<li class="separator hidden-lg hidden-md"></li>
							</ul>
						</div>
					</div>
				</nav>
				<!--            内容区域-->
				<div class="content" id="app">
					<div class="container-fluid">
						<div class="row">
							<div class="col-md-12">
								<div class="card">
									<div class="content">

										<h4 class="title">标签管理</h4>
										<div class="btn-toolbar" role="toolbar">
											<div class="btn-group btn-group-seperator  pull-right">
												<a href="./lable_add.html" class="btn btn-default"><i
														class="ti-plus f-20"></i></a>
											</div>
										</div>
										<div>
											<el-collapse v-model="activeName" accordion>
												<el-collapse-item v-bind:title="catalogues2[0][index].title_name"
													v-bind:name="index" v-for="(item, index) in catalogues2[0]">
													<template>
														<el-table :data="catalogues2[1][index]" stripe
															style="width: 100%">
															<el-table-column prop="catalogue_name" label="标签"
																style="width: 100%">
															</el-table-column>
															<el-table-column prop="catalogue_size" label="此标签下的文章数量"
																style="width: 100%">
															</el-table-column>
															<el-table-column fixed="right" label="操作" width="100">
																<template slot-scope="scope">
																	<el-button @click="handleClick(scope.row)"
																		type="text" size="small">编辑</el-button>
																	<el-button
																		@click.native.prevent="deleteRow(scope.$index,catalogues2[1][index])"
																		type="text" size="small">删除</el-button>
																</template>
															</el-table-column>
														</el-table>
													</template>

												</el-collapse-item>
											</el-collapse>


										</div>


									</div>
								</div>
							</div>
						</div>

					</div>

					<!--                脚部-->
					<footer class="footer">
						<div class="container-fluid">
							<nav class="pull-left">
								<ul>
									<li>
										<a href="http://boke.huitoushian.cn" target="_blank">
											我的博客
										</a>
									</li>
								</ul>
							</nav>
							<p class="copyright pull-right">
								&copy;
								<script>
									document.write(new Date().getFullYear())
								</script>
								<a href="http://www.17sucai.com/">胡安民</a>
							</p>
						</div>
					</footer>
				</div>
			</div>
		</div>

		<script src="../../code/public_code.js"></script>
		<!--   Core JS Files   -->
		<script src="../assets/vendors/jquery-3.1.1.min.js" type="text/javascript"></script>
		<script src="../assets/vendors/jquery-ui.min.js" type="text/javascript"></script>
		<script src="../assets/vendors/bootstrap.min.js" type="text/javascript"></script>
		<script src="../assets/vendors/material.min.js" type="text/javascript"></script>
		<script src="../assets/vendors/perfect-scrollbar.jquery.min.js" type="text/javascript"></script>
		<!-- Forms Validations Plugin -->
		<script src="../assets/vendors/jquery.validate.min.js"></script>
		<!--  Plugin for Date Time Picker and Full Calendar Plugin-->
		<script src="../assets/vendors/moment.min.js"></script>
		<!--  Charts Plugin -->
		<script src="../assets/vendors/chartist.min.js"></script>
		<!--  Plugin for the Wizard -->
		<script src="../assets/vendors/jquery.bootstrap-wizard.js"></script>
		<!--  Notifications Plugin    -->
		<script src="../assets/vendors/bootstrap-notify.js"></script>
		<!-- DateTimePicker Plugin -->
		<script src="../assets/vendors/bootstrap-datetimepicker.js"></script>
		<!-- Vector Map plugin -->
		<script src="../assets/vendors/jquery-jvectormap.js"></script>
		<!-- Sliders Plugin -->
		<script src="../assets/vendors/nouislider.min.js"></script>
		<!-- Select Plugin -->
		<script src="../assets/vendors/jquery.select-bootstrap.js"></script>
		<!--  DataTables.net Plugin    -->
		<script src="../assets/vendors/jquery.datatables.js"></script>
		<!-- Sweet Alert 2 plugin -->
		<script src="../assets/vendors/sweetalert/js/sweetalert2.min.js"></script>
		<!--	Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
		<script src="../assets/vendors/jasny-bootstrap.min.js"></script>
		<!--  Full Calendar Plugin    -->
		<script src="../assets/vendors/fullcalendar.min.js"></script>
		<!-- TagsInput Plugin -->
		<script src="../assets/vendors/jquery.tagsinput.js"></script>
		<!-- Material Dashboard javascript methods -->
		<script src="../assets/js/amaze.js"></script>
		<!-- Material Dashboard DEMO methods, don't include it in your project! -->
		<script src="../assets/js/demo.js"></script>

		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<script src="../assets/js/http_cdn.staticfile.org_vue-resource_1.5.1_vue-resource.js"></script>
		<script src="../../code/js-cookie.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>

		<!--   Core JS Files   -->
		<script src="../assets/vendors/jquery-ui-1.12.0/jquery-ui.js"></script>



		<script>
			var login = getCookie("login")
			if (login == null) {
				location.href = "../user/login.html"
			}
		</script>
		<script>
			var vue = new Vue({
				el: '#app',
				data: {
					activeName: '1',
					catalogues: [],
					titles: [],
					catalogues2: [
						[], // 分类
						[] //标签
					]
				},
				created() {


					//发送get请求  分页数据 ( 最新文章)
					this.$http.get('http://' + http_ip + ':8083/feign_title').then(function(res) {

						this.catalogues2[0] = res.data.data;


						//发送get请求  分页数据 ( 最新文章)
						this.$http.get('http://' + http_ip + ':8083/feign_catalogue/all').then(function(res) {

							for (var i = 0; i < this.catalogues2[0].length; i++) {

								var myCars = [];
								for (var i1 = 0; i1 < res.body.data.length; i1++) {
									if (this.catalogues2[0][i].id === res.body.data[i1].title_id) {
										myCars.push(res.body.data[i1])
									}

								}

								this.catalogues2[1].push(myCars)
							}


						}, function() {
							console.log('请求失败处理');
						});


					}, function() {
						console.log('请求失败处理');
					});







				},
				methods: {
					handleClick(row) {
						console.log(row);
						window.location.href = "./lable_up.html?catalogueId=" + row.id

					},
					deleteRow(index, rows) {

						var r = confirm("是否确认删除");
						if (r === true) {
							
							//发送get请求
							this.$http.post('http://' + http_ip + ':8083/feign_catalogue/del', {
								'id': rows[index].id
							}).then(function(res) {

								if (res.bodyText === "删除成功") {
									alert(res.bodyText)
									rows.splice(index, 1);
									
								}

							}, function() {
								console.log('请求失败处理');
							});
							
						}

						// window.location.href = "./lable_up.html?catalogueId=" + row.id

						
					},
				}
			})


			//注销登录
			$("#logout").click(function() {
				delCookie("login")

				location.reload()

			})


			$(document).ready(function() {

				$("#simple-accordion-alt-2, #simple-accordion-alt-3").accordion({
					collapsible: true,
					active: 0,
					animate: 200
				});

				$('body').on('click', '#btn-color-targets > .btn', function() {
					var color = $(this).data('target-color');
					$('#modalColor').attr('data-modal-color', color);
				});
			});
		</script>

	</body>
</html>
